<template>
    <div class="resource-department-container">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <ask-city-cascader
                    v-model="form.keyword"
                    ref="cityCascader"
                    @change="handleChange"
                    :showModel="['province', 'city', 'area', 'town']"
                    showNot
                    clear />
            </el-form-item>
            <el-form-item>
                <el-button @click="searchData">筛选</el-button>
            </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" type="card" v-if="departmentList.length" @tab-click="changeTabs">
            <el-tab-pane v-for="(item, index) in departmentList" :label="item.name" :name="item.id"
                         :key="index"></el-tab-pane>
        </el-tabs>
        <p class="tips" v-else>该区域暂无部门，请联系部门添加，或直接至<el-link type="primary" @click="toOrg">组织架构</el-link>添加</p>
        <el-button @click="add" class="add-resource" :disabled="!activeName">添加标签</el-button>
        <el-table
            v-show="tableData.length"
            :data="tableData"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            style="width: 100%">
<!--            <el-table-column-->
<!--                prop="date"-->
<!--                label="排序">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-input v-model="scope.row.sort"></el-input>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column
                prop="name"
                label="标签名称">
            </el-table-column>
            <el-table-column
                prop="valueKindName"
                label="默认配置类型">
            </el-table-column>
            <el-table-column
                prop="optionName"
                label="选项">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="deleteData(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text
            style="min-height: 400px;"
            v-if="tableData.length === 0">
        </ask-empty-text>
        <pagination v-show="total > 0" :total="total" :page.sync="pageIndex" :limit.sync="pageSize"
                    @pagination="getTable"/>
        <resource-add-popup ref="resourceAddPopup" :selectedData="allTableData" :popupTableColumn="popupTableColumn" title="添加类型" @saveData="saveData" />
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import ResourceAddPopup from "@/components/add-resource-popup/index.vue";
import { buildCustomObj } from "@/utils";
@Component({
    components: {
        ResourceAddPopup
    }
})
export default class ResourceDepartment extends Vue {
    activeName = "";

    // 搜索条件
    form = {
        keyword: ""
    };

    // 部门tabs列表
    departmentList: any = []

    // 弹框表格表头
    popupTableColumn = [
        {
            prop: "name",
            label: "标签名称"
        },
        {
            prop: "departmentName",
            label: "目前所属部门"
        },
        {
            prop: "labelName",
            label: "目前所属分类"
        }
    ]

    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData = [];
    // 全部匹配数据，用做回显
    allTableData = []
    areaValue: any = {};

    created() {
        this.searchData("510115106000");
    }

    // 添加
    async add() {
        this.allTableData = [];
        const res = await this.$server["resource/other"]({
            data: {
                deptId: this.activeName,
                pageSize: 99999,
                currentPage: 1
            }
        });
        if (res.data.code === 200) {
            this.allTableData = buildCustomObj(res.data.data.records, [...this.popupTableColumn, { prop: "id", name: "id" }]);
        }
        (this.$refs.resourceAddPopup as ResourceAddPopup).showDialog();
    };

    changeTabs() {
        this.pageIndex = 1;
        this.getTable();
    }

    // 去组织架构
    toOrg() {
        this.$router.push({ path: "/organization/home", query: { cityCode: this.areaValue.province.name === "" ? "" : this.form.keyword } });
    }

    // 查询政级id
    getAreaId() {
        if (!this.areaValue.area) return "";
        const name = this.areaValue.town.name === "" ? "askCityareaPanelRef" : "askCitytownPanelRef";
        const list = (this.$refs.cityCascader as any).$refs[name][0].sourceList;
        return list.filter((item: any) => item.code.toString() === this.form.keyword)[0].id;
    }

    // 修改地区
    async handleChange(value: any) {
        this.areaValue = value;
    }

    // 查询部门
    async searchData(val: any) {
        if (!this.form.keyword && (val === "" || typeof val === "object")) return;
        const res = await this.$server["org/getDepartmentList"]({
            data: {
                governmentId: typeof val === "string" ? 32827 : this.getAreaId()
            }
        });
        if (res.data.code === 200) {
            this.departmentList = res.data.data;
            if (this.departmentList.length) {
                this.activeName = this.departmentList[0].id;
                await this.getTable();
            } else {
                this.total = 0;
                this.pageSize = 10;
                this.pageIndex = 1;
                this.tableData = [];
            }
        } else {
            this.departmentList = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    };

    // 查询表格
    async getTable() {
        const res = await this.$server["resource/other"]({
            data: {
                deptId: this.activeName,
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.tableData = [];
            this.total = 0;
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 删除
    deleteData(row: any) {
        this.$confirm('是否确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async() => {
            const res = await this.$server["resource/department/delete/template"]({
                data: {
                    relationId: row.id,
                    departmentId: this.activeName,
                    kind: 2
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                await this.getTable();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        }).catch();
    }

    // 保存添加标签
    async saveData(data: any) {
        const res = await this.$server["resource/department/add"]({
            data: {
                dimensionalityId: data,
                deptId: this.activeName
            }
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            (this.$refs.resourceAddPopup as ResourceAddPopup).closeDialog();
            this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }
}
</script>

<style scoped lang="scss">
    .resource-department-container {
        .add-resource {
            margin-bottom: 10px;
        }
        .tips {
            font-size: 0.14rem;
            margin-top: 0;
        }
    }
</style>
